<script setup lang="ts">
import { onMounted, ref } from "vue";
import { onBeforeRouteUpdate, useRoute } from "vue-router";
import { storeToRefs } from "pinia";
import { ElMessage } from "element-plus";
import type { RouteLocationNormalized } from "vue-router";
import type { Propertie, SalePropertie } from "@/types/subCategoryTypes/interface.ts";
import type { Attr } from "@/types/subCategoryTypes/subCategoryTypes.ts";
import useSubCategoryStore from "@/pinia/modules/subCategoryStore/subCategoryStore.ts";

interface Emits {
   (e: "getBrandId", brandId: string | null): void;
   (e: "getAttrs", attrs: Attr[]): void;
}

const emits = defineEmits<Emits>();

const route: RouteLocationNormalized = useRoute();
const subCategoryStore = useSubCategoryStore();
const { salePropAttribute, brandAttribute, selectBrand } = storeToRefs(subCategoryStore);

/*加载状态*/
const loading = ref<boolean>(false);

/*获取筛选列表的回调函数*/
const fetchFilterList = async (id: string) => {
   try {
      loading.value = true;
      await subCategoryStore.fetchFilterList(id);
   } catch (error: any) {
      ElMessage.error(error.message);
   } finally {
      loading.value = false;
   }
};


/*修改商品品牌选中状态的回调函数*/
const changeSelectBrand = (brandId: string) => {
   selectBrand.value = brandId;
   emits("getBrandId", brandId);
};


/*修改商品属性选中状态的回调函数*/
const changeSelectProp = (saleProp: SalePropertie, salePropValue: Propertie) => {
   saleProp.selectProp = salePropValue.id;
   const attrs: Attr[] = [];
   salePropAttribute.value.forEach(item => {
      if (item.selectProp) {
         const prop = item.properties.find(propValue => item.selectProp === propValue.id);
         attrs.push({ groupName: item.name, propertyName: prop!.name });
      }
   });
   emits("getAttrs", attrs);
};

onBeforeRouteUpdate((to, from, next) => {
   /*放行*/
   next();
   /*再次调用函数获取筛选列表*/
   fetchFilterList(to.params.id as string);
});

onMounted(() => {
   fetchFilterList(route.params.id as string);
});

</script>

<template>
   <div class="filter">
      <div class="item">
         <el-skeleton animated :count="1" :loading="loading">
            <template #template>
               <el-skeleton-item></el-skeleton-item>
            </template>
            <template #default>
               <div class="head">品牌:</div>
               <div class="body">
                  <a v-for="(brandValue) in brandAttribute" :key="brandValue.name"
                     :class="{active:brandValue.id===selectBrand}" @click="changeSelectBrand(brandValue.id as string)">
                     {{ brandValue.name }}
                  </a>
               </div>
            </template>
         </el-skeleton>
      </div>
         <el-skeleton animated :count="5" :loading="loading">
            <template #template>
               <el-skeleton-item></el-skeleton-item>
            </template>
            <template #default>
               <div class="item" v-for="(saleProp) in salePropAttribute" :key="saleProp.id">
                  <div class="head">{{ saleProp.name }}:</div>
                  <div class="body">
                     <a v-for="(salePropValue) in saleProp.properties" :key="salePropValue.name"
                        :class="{active:saleProp.selectProp===salePropValue.id}" @click="changeSelectProp(saleProp,salePropValue)">
                        {{ salePropValue.name }}
                     </a>
                  </div>
               </div>
            </template>
         </el-skeleton>
   </div>
</template>

<style scoped lang="less">
.filter {
   background: #fff;
   padding: 25px;

   .item {
      display: flex;
      line-height: 40px;

      .head {
         width: 70px;
         color: #999;
      }

      .body {
         flex: 1;

         a {
            margin-right: 36px;
            transition: all .3s;
            display: inline-block;

            &.active, &:hover {
               color: @xtxColor;
            }
         }
      }
   }

   .el-skeleton {
      width: 800px;
      line-height: 35px;
   }
}
</style>
